<template>
  <div class="page-content">
    <div class="page-title">轮播图管理</div>
    <div class="content-box clearfix banner-list">
      <div class="pic-item fl" v-for="(item, index) in fileList" :key="item.img">
        <img :src="item.img" alt="" />
        <div class="handle">
          <a-icon type="swap-left" style="font-size: 30px;" @click="swapAd(index, 'left')" />
          <a-icon type="delete" style="font-size: 30px;" @click="deleteAd(item.id)" />
          <a-icon type="swap-right" style="font-size: 30px;" @click="swapAd(index, 'right')" />
        </div>
      </div>
      <div class="upload fl" v-if="fileList.length < 10">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :action="actionUrl"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <div>
            <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text" style="font-size: 16px;">
              上传
            </div>
            <p>图片建议尺寸375px*176px，大小不超过5M</p>
          </div>
        </a-upload>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      actionUrl: process.env.VUE_APP_API_BASE_URL + '/images'
    }
  },
  mounted() {
    this.getAds()
  },
  methods: {
    getAds() {
      this.$http
        .get('/ads')
        .then((res) => {
          if (res.success) {
            this.fileList = res.model
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          this.$message.error(err.message || err.data.message)
        })
    },
    handleChange(info) {
      console.log(info)
      if (info.file.status === 'uploading') {
        this.loading = true
      }
      if (info.file.status === 'done') {
        console.log(info.file)
        if (info.file.response.success) {
          this.$http
            .post('/ads', { img: info.file.response.model, name: info.file.name })
            .then((res) => {
              if (res.success) {
                this.getAds()
              } else {
                this.$message.error(res.message)
              }
            })
          this.loading = false
        } else {
          this.$message.error(info.file.response.message)
        }
      }
      this.loading = false
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('图片格式错误!')
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('图片大小不能超过5M!')
      }
      return isJpgOrPng && isLt2M
    },
    deleteAd(id) {
      this.$confirm({
        title: '提示',
        content: '确定删除此轮播图？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$http
            .delete('/ads/' + id)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功')
                this.getAds()
              } else {
                this.$message.error(res.message)
              }
            })
            .catch(() => {
              this.$message.error('删除失败')
            })
        }
      })
      console.log(file)
    },
    swapAd(index, direction) {
      let fileList = this.fileList.map((item) => {
        let elem = {}
        elem.id = item.id
        elem.sequence = item.sequence
        return elem
      })
      if (direction === 'left') {
        if (index == 0) {
          return
        }
        if (index > 0) {
          let frontsequence = fileList[index - 1].sequence
          let behidsequence = fileList[index].sequence
          fileList[index].sequence = frontsequence
          fileList[index - 1].sequence = behidsequence
        }
      }
      if (direction === 'right') {
        if (index === fileList.length - 1) {
          return
        } else {
          let frontsequence = fileList[index + 1].sequence
          let behidsequence = fileList[index].sequence
          fileList[index].sequence = frontsequence
          fileList[index + 1].sequence = behidsequence
        }
      }
      this.$http
        .put('/ads', fileList)
        .then((res) => {
          if (res.success) {
            this.$message.success('调换成功')
            this.getAds()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('调换失败')
        })
    }
  }
}
</script>

<style lang="less">
.banner-list {
  .pic-item {
    box-sizing: border-box;
    width: 375px;
    height: 175px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ddd;
    position: relative;
    img {
      float: left;
      margin: 5px 5px;
      width: 360px;
      height: 165px;
      border-radius: 4px;
    }
    .handle {
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      text-align: center;
      display: none;
      .anticon {
        z-index: 100;
        color: #dbdada;
        cursor: pointer;
        margin: 0 10px;
        transform: translateY(65px);
      }
    }
  }
  .pic-item:hover {
    .handle {
      display: block;
    }
  }
  .upload {
    width: 375px;
    height: 170px;
    transform: translateY(5px);
    .avatar-uploader.ant-upload-picture-card-wrapper {
      width: 375px;
      height: 170px;
    }
    .ant-upload.ant-upload-select-picture-card {
      width: 375px;
      height: 170px;
    }
  }
}
</style>
